<!-- 薪资排行 -->
<template>
	<view class="page" v-if="my == 'true'">
		<u-navbar title="趣豆充值"></u-navbar>
		<view class="page-box">
			<view class="coin-box">
				<view class="coin-top">
					<view class="amount">账号余额：{{vuex_amount}} 趣豆</view>
					<view class="record" @click="record">收支详情</view>
				</view>
				<view class="vip-tab-box" @click="toVip">
					<view>开通会员</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="label">充值: {{value*unit}}趣豆(1元=100趣豆)</view>
				<u-slider v-model="value" block-width="80" height="40" min="10" step="10" max="100"></u-slider>
			</view>
			<view class="confrim-btn">
				<u-button type="primary" @click="handleHot">充值</u-button>
			</view>
			
		</view>
			
		<user-auth></user-auth>
		<qrcode-popup :msg="msg"></qrcode-popup>
	</view>
</template>

<script>
	import qrcodePopup from "@/components/qrcode-popup/qrcode-popup";
	export default {
		components: {
			qrcodePopup,
		},
		data() {
			return {
				userId: 0,
				my: 'false',
				msg: '记得关注服务号避免下次找不到',
				taskList: [],
				unit: 200,
				adFlag: false,
				value: 10,
			}
		},
		onLoad(option) {
			this.my = option.my;
			this.userId = uni.getStorageSync("userId");
			this.getAmount();
		},
		onShareAppMessage(res) {
			return {
				title: '送你一个对象，快来「处CP」吧！',
				path: '/pages/index?shareUserId='+this.userId,
				imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
			};
		},
		onShareTimeline() {
			return {
				title: '送你一个对象，快来「处CP」吧！',
				path: '/pages/index?shareUserId='+this.userId,
				imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
			};
		},
		computed: {
			vuex_amount: {
			    get() {
			      return this.$store.state.vuex_amount;
			    },
			    set(value) {
			      this.$store.commit('setAmount', value);
			    }
			},
		},
		methods: {
			getAmount() {
				this.$u.get('/pay/userCoin/getAmountAndTuan',{
					appId: this.website.appId,
				}).then(res => {
					this.$store.commit('setAmount', res.amount);
				});
			},
			record() {
				this.$u.route({
					url: 'packgeMine/pages/me/coin',
				});
			},
			toVip() {
				this.$u.route({
					url: 'packgeMine/pages/me/vip',
					params: {
						my: 'true',
					}
				});
			},
			handleHot() {
				var coinNum = this.value * this.unit;
				this.$u.post('/pay/coin/payNum',{
					coinNum: coinNum,
					appId: this.website.appId,
				}).then(res => {
					var that = this;
					uni.requestPayment({ 
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageValue,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(res) {
							uni.showToast({
								title: '支付成功',
								icon:'success',
								duration: 2000
							});
							that.getAmount();
						},
						fail: function(err) {
							uni.showModal({
								title: '温馨提示',
								content: '订单尚未支付',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										
									}
								}
							});
						}
					});
				});
				
			},
			doOrder() {
				this.$store.commit('setQr', true);
			},
			getTaskList() {
				this.$u.get('/wq/task/list').then(res => {
					this.taskList = res.data;
				});
			},
			sumitTask(id) {
				this.$u.post('/wq/task/ok',{
					id: id,
				}).then(res => {
					this.taskList = res.data;
					this.$u.toast('签到成功');
				});
			},
			pingjia(e) {
				var that = this;
				var plugin = requirePlugin("wxacommentplugin");
				plugin.openComment({
				  success: (res)=>{
					if(res.errCode == 0){
						that.sumitTask(e.id);
					}
				  },
				  fail: (res) =>{
				    console.log('plugin.openComment fail', res)
				  }
				})
			},
			tianjia(e) {
				if (wx.canIUse('checkIsAddedToMyMiniProgram')) {
					this.checkIsAddedToMyMiniProgram(e);
				} else {
					// 不兼容的话，做自己的逻辑
				}
			},
			doSign(e) {
				this.judgeLogin(() => {
					this.sumitTask(e.id);
				});
			},
			checkIsAddedToMyMiniProgram(e) {
			    try {
					var that = this;
			        wx.checkIsAddedToMyMiniProgram({
						success: (res) => {
							if (res.added) {
								uni.showModal({
								  title: '提示',
								  content: '点击下方领取按钮后自动发放',
								  confirmText: '领取',
								  success: (m) => {
								    if (m.confirm) {
										that.sumitTask(e.id);
								    }
								  }
								});
							} else {
								uni.showModal({
								  title: '添加到我的小程序领趣豆',
								  content: '点击小程序右上角胶囊-添加到我的小程序之后可领取',
								  showCancel: false,
								  confirmText: '知道了',
								  success: (e) => {
								    if (e.confirm) {
										
								    }
								  }
								}); 
							}
						},
						fail: () => {
								
						},
			        });
				} catch (error) {
					console.log('error: ', error);
				}
			},
			submitBtn(e) {
				if(this.adFlag){
					this.sumitTask(e.id);
					return;
				}
				this.$u.get('/system/config/getAdValue',{
					appId: this.website.appId
				}).then(res => {
					this.openImg(res.adId);
				});
			},
			openImg(adId) {
				var _this = this;
				uni.showModal({
				  title: '提示',
				  content: '看完广告后，点击下方按钮领取趣豆',
				  showCancel: false,
				  success: (res) => {
				    if (res.confirm) {
						//加载激励广告
						_this.$utils.videoAdInit(adId);
						// 在适合的场景显示插屏广告
						_this.$utils.videoAdShow()
						.then((res) => {
						  if (res) {
							_this.adFlag = true;
						  } else {
							console.log('广告提前退出')
						  }
						})
						.catch((err) => {
							console.log('广告加载失败')
						});  
				    }
				  }
				});
			},
			moreTask() {
				this.$u.route({
					url: 'pages/me/step/task',
					params: {
						my: 'true',
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f9f8f8;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}
	
	.page-box {
		background-color: #fff;
		padding-bottom: 0;
	}
	
	.label {
		margin-bottom: 15px;
		font-size: 14px;
		font-weight: bold;
	}
	.amount {
		font-size: 30rpx;
		font-weight: bold;
	}
	.coin-box {
		padding: 15px;
	}
	.coin-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40px;
	}
	.record {
		font-size: 20rpx;
		line-height: 20px;
		color: #303133;
		background: #c0c4cc;
		padding: 3px 10px;
		border-radius: 3px;
		font-weight: bold;
	}
	.coin-tip {
		font-size: 28rpx;
		color: red;
		font-weight: bold;
		padding: 15px;
		display: flex;
		justify-content: center;
		background: #ffeaea;
	}
	.confrim-btn {
		padding: 15px;
	}
	.ad-btn-box {
		padding: 15px;
		display: flex;
		justify-content: center;
		flex: 1;
	}
	.ad-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: btnScaleAni 3.5s infinite;
	}
	.vip-tab-box {
		display: flex;
		align-items: center;
		padding: 20px 15px;
		justify-content: space-between;
		margin-bottom: 15px;
		background-image: linear-gradient(180deg, #f9a470, #db854e);
		border-radius: 10px;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
	}
	
	.task-box {
		background-color: #fff;
		padding: 15px;
		margin: 10px;
		border-radius: 10px;
		
		.task-title {
			border-left: 3px solid #ddd;
			padding-left: 5px;
			line-height: 12px;
		}
		
		.card-box {
			padding-top: 15px;
			
			.title {
				font-size: 28rpx;
				font-weight: bolder;
			}
			
			.desc {
				font-size: 28rpx;
				margin: 10px 0;
			}
		}
	}
	
	.coin-title-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15px;
	}
	.more-btn {
		display: flex;
		align-items: center;
		line-height: 10px;
		color: #19a6a6;
		font-size: 22rpx;
	}
	
	@keyframes btnScaleAni {
	  0%{ transform: scale(.85); opacity: .6; }
	  50%{ transform: scale(1); opacity: 1; }
	  100%{ transform: scale(.85); opacity: .6; }
	}
</style>
